<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 3D 转换</title>
    <style type="text/css">
        html,
        body {
            background-color: #eee;
        }
        
        .box-3d {
            transform-style: preserve-3d;
        }
        
        .d-3d-translate img:hover {
            transform: translate3d(30px, 20px, 400px);
        }
        
        .d-3d-scale img:hover {
            transform: scale3d(1, 1.2, 5)
        }
        
        .stage {
            width: 300px;
            height: 300px;
            float: left;
            margin: 15px;
            position: relative;
            background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
            perspective: 1200px;
        }
        
        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-style: preserve-3d;
        }
        
        .container img {
            position: absolute;
            margin-left: -35px;
            margin-top: -50px;
        }
        
        .container img:nth-child(1) {
            z-index: 1;
            opacity: .6;
        }
        
        .s1 img:nth-child(2) {
            z-index: 2;
        }

        .s1 img:nth-child(2):hover {
            transform: translateZ(200px);
        }
        
        .s2 img:nth-child(2) {
            z-index: 2;
            transform: translate3d(30px, 30px, -200px);
        }
    </style>
</head>

<body>
    <div class="box-3d d-3d-translate">
        <img src="card-king.png" alt="">
    </div>
    <div class="box d-3d-scale">
        <img src="card-king.png" alt="">
    </div>

    <div class="stage s1">
        <div class="container">
            <img src="card-king.png" alt="" width="70" height="100" />
            <img src="card-king.png" alt="" width="70" height="100" />
        </div>
    </div>
    <div class="stage s2">
        <div class="container">
            <img src="card-king.png" alt="" width="70" height="100" />
            <img src="card-king.png" alt="" width="70" height="100" />
        </div>
    </div>
</body>

</html>